<template>
	<view>
		<view class="box">
			<image :src="HospitalData.avatar" mode="wideFill" style="width: 100%; height: 200px;"></image>
			<view style="padding: 10px;">
				<view style="display: flex;">
					<view style="display: flex;flex: 2;">
						<view style="font-size: 20px;font-weight: bold;color: orange;">{{HospitalData.name}}</view>
						<view class="square-box" style="margin-left: 10px;font-size: 15px;">{{HospitalData.level}}
						</view>
					</view>
					<view style="flex: 1; font-size: 15px;margin-top: 4px;color: orange;">
						<strong>总挂号量：</strong>{{HospitalData.count}}
					</view>
				</view>
				<view>
					<view style="font-size: 15px;margin-top: 10px;"><strong>地址：</strong>{{HospitalData.address}}</view>
					<view style="font-size: 15px;margin-top: 10px;"><strong>客服电话：</strong>{{HospitalData.phoneNumber }}
					</view>
				</view>
				<view style="margin-top: 10px;">
					<strong>医院介绍：</strong>{{HospitalData.introduction }}
				</view>
			</view>
		</view>
		<view style="padding: 10px;margin-top: 10px;">
			<view style="display: flex;">
				<view style="font-size: 18px;font-weight: bold;">医院专家</view>
				<view style="margin-left: 15px;color: gray;margin-top: 4px;">高好评率</view>
				<view style="margin-left: 10px;color: gray;margin-top: 4px;">高接诊率</view>
				<view style="font-weight: bold;margin-left: 60px;margin-top: 4px;" @click="dialogToggle('error')">查看更多 >
				</view>
			</view>
			<view class="box" style="margin-top: 10px;">
				<view style="display: flex;margin-top: 10px;" v-for="doctor in doctorData">
					<view style="width: 70px;">
						<image :src="doctor.avatar"
							style="width: 70px;height: 70px; margin-left: 2px;border-radius: 50%;">
					</view>
					<view style="flex: 3;">
						<view style="display: flex;gap: 5px;margin-left: 8px;font-size: 14px;">
							<view style="font-size: 18px;font-weight: bold;">{{doctor.name}}</view>
							<view style="margin-top: 2px;">{{doctor.staff}}</view>
							<view style="margin-top: 2px;">{{doctor.officeName}}</view>
						</view>
						<view
							style="display: flex;gap: 10px;margin-left: 10px;font-size: 13px;color: gray;margin-top: 2px;">
							<view>接诊率 <strong style="color: orange;margin-left: 10px;">99%</strong></view>
							<view>问诊量 <strong style="color: orange;margin-left: 10px;">{{doctor.count}}</strong></view>
						</view>
					</view>
					<view style="flex: 1;">
						<button size="mini" type="primary" @click="goDoctoerDetail(doctor.id)"
							style="font-size: 14px;line-height: 20px;width: 48px;padding: 10px;margin-left: 10px;">查看详情</button>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="我知道了" title="通知" content="测试数据,暂无更多信息"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HospitalData: {},
				doctorData: {},
				msgType: null,
			}
		},
		onLoad(option) {
			this.hospitalId = option.hospitalId

		},
		onShow() {
			this.loadHospitalDoctor()
			this.loadHospital()
		},
		methods: {
			loadHospital() {
				this.$request.get('/hospital/selectById?id=' + this.hospitalId).then(res => {
					if (res.code === '200') {
						this.HospitalData = res.data
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			dialogToggle(type) {
				this.$refs.alertDialog.open()
			},
			loadHospitalDoctor() {
				this.$request.get(`/doctor/selectByHospitalId/${this.hospitalId}`)
					.then(res => {
						if (res.code === '200') {
							this.doctorData = res.data;
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			loadDepartment() {
				this.$request.get(`/department/selectById/${this.departmentId}`).then(res => {
					if (res.code === '200') {
						this.departmentData = res.data;
						this.officeId = res.data.officeList[0].officeId
						this.loadOfficeDoctor()
						this.selectedButtonIndex = 0
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			loadOffice() {
				this.$request.get(`/office/selectById/${this.officeId}`).then(res => {
					if (res.code === '200') {
						this.departmentData = res.data;
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			goDoctoerDetail(doctorId) {
				uni.navigateTo({
					url: '/pages/doctorDetail/doctorDetail?doctorId=' + doctorId
				})
			},
			closetoggle2() {
				this.$refs.popup2.close()
			},
		}
	}
</script>

<style>
	.is-active {
		background-color: #ffaa00;
		/* 选中状态的背景颜色示例 */
		color: #FFF7F3;
		/* 文本颜色 */
		border-color: #FF5000;
		/* 边框颜色 */
	}
</style>